<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body,div{
            margin: 0;
            padding: 0;
        }
        
    </style>
</head>

<body>

    <canvas id="tutorial" ></canvas>


    <script>
        function getRandomHexColor() {
            var letters = '0123456789ABCDEF';
            var color = '#';
            for (var i = 0; i < 6; i++) {
                color += letters[Math.floor(Math.random() * 16)];
            }
            return color;
        }
 
        
        function getRandom(min, max) {
            return Math.random() * (max - min) + min
        }


        const canvas = document.getElementById("tutorial");
       
        // 获取视口尺寸（考虑滚动条）
        let viewportWidth = Math.min(document.documentElement.clientWidth || 0, window.innerWidth || 0);
        let viewportHeight = Math.min(document.documentElement.clientHeight || 0, window.innerHeight || 0);
        
         
        viewportWidth -= 20
        viewportHeight -= 10
        // 应用尺寸到Canvas
        canvas.width = viewportWidth;
        canvas.height = viewportHeight;
        console.log(" canvas.width" , canvas.width);
        

        const ctx = canvas.getContext("2d");



        /**
         * 圆 
         * x y
         * r 半径
         * 
         */
        class Circle {
            constructor(x, y,direction, r = 10) {
                this.x = x;
                this.y = y;
                this.direction = direction;
                this.r = r;
                this.color = getRandomHexColor();
            }

            draw() {
                ctx.beginPath();
                // ctx.fillStyle= getRandomHexColor(); // 每次移动都切换一次颜色
                ctx.fillStyle=  this.color;      //创建之初就固定的颜色
                ctx.arc(this.x, this.y, this.r, 0, 2 * Math.PI, true);
                ctx.fill();
                
                // 修改位置
                // this.x = getRandom(0, viewportWidth)
                // this.y = getRandom(0, viewportHeight)
                const step = 10;
                
                switch(this.direction){
                    case 0:  
                        this.x -= step 
                        break;
                    case 1:  
                        this.y -= step 
                        break;
                    case 2:  
                        this.x += step 
                        break;
                    case 3:  
                        this.y += step 
                        break;
                }
                this.calc()

            }


            calc(){
                if(this.x<0 || this.y<0 || this.x > viewportWidth || this.y >viewportHeight){
                    this.x = getRandom(0, viewportWidth)
                    this.y = getRandom(0, viewportHeight)
                }
            
            }

        }

       

        class Gra {
            constructor(startx, starty, r = 10, size = 20) {
                this.startx = startx;
                this.starty = starty;
                this.r = r;
                this.size = size;
                //数组
                this.circle = []

                //初始化图的信息
                this.init()
            }

            init() {

                for (let i = 0; i < this.size; i++) {
                    //     this.startx += 20;
                    //     this.starty += 20

                    //     this.circle.push(new Circle(this.startx,this.starty,this.r))
                    let rx = getRandom(0, viewportWidth)
                    let ry = getRandom(0, viewportHeight)
                    let rr = getRandom(2, 8)
                    let direction = Math.floor(getRandom(0,3))
                    this.circle.push(new Circle(rx, ry, direction ,rr))
                }
            }

            draw() {
                console.log(this.circle);

                setInterval(()=>{
                    ctx.clearRect(0,0,1900,1000);
                    this.circle.forEach(item => item.draw())
                },90)


            }



        }




        let g = new Gra(200, 200, 3, 1600);
        g.draw()





    </script>

</body>

</html>